{% extends 'user/base.html' %}

{% block content %}
    <div class="max-w-[1440px] mx-auto" style="margin-top:100px;">
        <div class="flex p-8 gap-8 bg-white shadow-lg rounded-lg m-8">
            <div class="w-[300px] flex-shrink-0">
                <img src="{{ url_for('static', filename=movie.image_link) }}"
                     alt="电影海报"
                     class="w-full h-[500px] object-cover rounded-lg shadow-lg">
            </div>

            <div class="flex-1">
                <div class="flex items-center justify-between mb-6">
                    <h1 class="text-3xl font-bold">{{ movie.name }}</h1>

                    <div class="flex flex-col items-end gap-2">
                        <div class="flex items-center gap-2">
                            <span class="text-4xl font-bold text-primary">8.4</span>
                        </div>

                        {% if (user_rating is none) %}
                            <!-- 用户评分区域 -->
                            <form method="POST">
                                <div class="flex items-center gap-2">
                                    <label for="user_rating" class="text-sm text-gray-600">您的评分：</label>
                                    <select id="user_rating" name="user_rating"
                                            class="border border-gray-300 rounded px-2 py-1 text-sm">
                                        <option value="">请选择</option>
                                        {% for i in range(1, 11) %}
                                            <option value="{{ i }}">{{ i }} 分</option>
                                        {% endfor %}
                                    </select>
                                    <button type="submit"
                                            class="bg-primary text-white px-3 py-1 text-sm rounded hover:bg-primary-dark">
                                        提交
                                    </button>
                                </div>
                            </form>
                        {% else %}
                            <div class="flex items-center gap-2">
                                <span class="text-sm text-gray-600">您的评分：{{ user_rating }}</span>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4 mb-6">
                    <div>
                        <div class="text-gray-600 mb-2">导演</div>
                        <div class="font-medium">{{ movie.director }}</div>
                    </div>
                    <div>
                        <div class="text-gray-600 mb-2">主演</div>
                        <div class="font-medium">{{ movie.leader }}</div>
                    </div>
                    <div>
                        <div class="text-gray-600 mb-2">类型</div>
                        <div class="font-medium">剧情 / 家庭</div>
                    </div>
                    <div>
                        <div class="text-gray-600 mb-2">上映国家/地区</div>
                        <div class="font-medium">{{ movie.country }}</div>
                    </div>
                    <div>
                        <div class="text-gray-600 mb-2">上映日期</div>
                        <div class="font-medium">{{ movie.years }}</div>
                    </div>
                </div>

                <div class="mb-6">
                    <div class="text-gray-600 mb-2">剧情简介</div>
                    <p class="text-gray-800 leading-relaxed">
                        {{ movie.intro }}
                    </p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
{% endblock %}